<template>
    <div id="home" @scroll="toggleHeader">
        <!-- 头部 -->
        <header class="border-bottom" v-show="show">
            <img class="header_img" src="/1.jpg" alt="" />
        </header>
        <!-- 身体 -->
        <div class="container">
            <!-- 轮播图 -->
            <swiper></swiper>
            <!-- 全民砍价 -->
            <bargaining></bargaining>
            <!-- 精选专题 -->
            <special></special>
            <!-- 人气推荐 -->
            <recommend></recommend>
        </div>
        <!-- 底部 -->
    </div>
</template>

<script>
// 轮播图引入
import swiper from "@/components/home/swiper/swiper.vue";
// 全民砍价引入
import bargaining from "@/components/home/Bargaining/Bargaining.vue";
// 精选专题引入
import special from "@/components/home/special/special.vue";
// 人气推荐引入
import recommend from "@/components/home/recommend/recommend.vue";
// 分接口引入
import { getBanners } from "@/utils/api";

// 局部混入
import demo from "@/mixins/demo";
export default {
    components: {
        swiper,
        bargaining,
        special,
        recommend,
    },
    mounted() {
        this.$loading.show();

        this.$loading.hide();
    },
    // 局部混入
    mixins: [demo],
    data() {
        return {
            show: false,
        };
    },
    mounted() {},
    methods: {
        toggleHeader(e) {
            if (e.target.scrollTop > 500) {
                this.show = true;
            } else {
                this.show = false;
            }
        },
    },
};
</script>

<style lang="scss" scoped>
#home {
    height: 100%;
    overflow-y: auto;
    header {
        font-size: 0.5rem;

        display: flex;
        justify-content: center;
        align-items: center;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        background-color: #fff;
        .header_img {
            width: 80px;
            height: 80px;
        }
    }
    .container {
        height: 1750px;
    }
}
</style>
